<template>
  <el-card>
  <div class="announcement-management">
    <header class="management-header">
      <button @click="goBack">返回</button>
      <h1>历史公告</h1>
      <div class="search-area">
        <input type="text" v-model="searchTitle" placeholder="搜索公告标题">
        <button @click = "search(searchTitle)" >🔍</button>
      </div>

    </header>
    <section class="announcement-list">
      <table>
        <thead>
        <tr>
          <th>序号</th>
          <th>时间</th>
          <th>标题</th>
          <th>内容</th>
          <th>处理人</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(announcement, index) in announcements" :key="announcement.public_id">
          <td>{{ announcement.public_id }}</td>
          <td>{{ formatDateTime(announcement) }}</td>
          <td>{{ announcement.public_title }}</td>
          <td>{{ announcement.public_content }}</td>
          <td>{{ announcement.operator }}</td>
          <td>
            <button type="reset" @click="viewDetails(announcement)">
              查看详细
            </button>
            <button type="reset" @click="deleteAnnouncement(announcement.public_title)">
              删除
            </button>
          </td>
        </tr>
        </tbody>
      </table>

      <el-dialog v-model="dialogShowFormVisible" title="显示历史公告" width="500">
        <el-form :model="selectedAnnouncement">
          <el-form-item label="序号" :label-width="formLabelWidth">
            <el-input v-model="selectedAnnouncement.public_id" autocomplete="off" disabled/>
          </el-form-item>

          <el-form-item label="时间" :label-width="formLabelWidth">
            <el-date-picker v-model="selectedAnnouncement.public_time" type="date" placeholder="选择日期" style="width: 100%" />
          </el-form-item>

          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="selectedAnnouncement.public_title" autocomplete="off" />
          </el-form-item>

          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input v-model="selectedAnnouncement.public_content" autocomplete="off" />
          </el-form-item>

          <el-form-item label="处理人" :label-width="formLabelWidth">
            <el-input v-model="selectedAnnouncement.operator" autocomplete="off" />
          </el-form-item>


        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="Refresh(selectedAnnouncement)">重新发布</el-button>
            <el-button type="info" @click="dialogShowFormVisible = false">关闭</el-button>
          </div>
        </template>

      </el-dialog>

    </section>
  </div>
    </el-card>

  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 4, 5, 6]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />


</template>

<script>
import {ElMessage} from "element-plus";
import axios from 'axios';

export default {
  name: 'AnnouncementManagement',
  data() {
    return {
      //分页
      currentPage: 1,
      pageSize: 5,
      pageInfo: {},

      selectedAnnouncement: {},
      formLabelWidth : '120px',
      searchTitle: '',
      announcements: [],
      dialogShowFormVisible:false
    };
  },
  methods: {
    //分页
    LoadStuPageData() {
      this.$http.get("http://localhost:8080/advise/page", {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      }).then((res) => {
        this.pageInfo = res.data;
        this.tableData = res.data.list;
        console.log(this.tableData);
      }).catch((err) => {
        console.log(err);
      });
    },

    Refresh(announcements){
      console.log(announcements);
      // if (!announcements.Public_title || !announcements.Public_content || !announcements.operator) {
      //   ElMessage.error('请填写所有必填字段');
      //   return;
      // }
      this.dialogShowFormVisible = false
      this.$http.post("http://localhost:8080/public/update",announcements).
      then((res)=>{
        if(res.data==1){
          console.log("修改成功!");
          ElMessage({
            message: '修改成功!',
            type: 'success',
          })
          this.dialogShowFormVisible = false
        }else{
          console.log("修改失败!");
          ElMessage({
            message: '修改失败!',
            type: 'warning',
          })
        }


      }).catch((err)=>{

      })

    },
    formatDateTime(announcements) {
      const date = new Date(announcements.public_time);
      return date.toLocaleString();
    },
    goBack() {
      this.$router.push({ name: 'announce' });
      // 返回上一个页面的逻辑
    },
    filterRecent() {
      // 确保这里使用的是普通函数，而不是箭头函数
      this.$http.get("http://localhost:8080/public/select", {params:{

        }}).then(response => {
        console.log('后端返回的数据:', response.data); // 打印后端返回的数据
        this.announcements = response.data;
        // 处理响应
      })
          .catch(error => {
            console.error('请求失败:', error.response ? error.response.data : error);
            // 处理错误
          });
    },
    viewDetails(announcement) {
      console.log(announcement);
      this.selectedAnnouncement = announcement
      this.dialogShowFormVisible = true
      // 查看公告详情的逻辑
    },
    deleteAnnouncement(Public_title) {
      if (!Public_title) {
        console.error("删除失败: 公告标题未提供");
        ElMessage({
          message: '删除失败: 公告标题未提供',
          type: 'error',
        });
        return;
      }
      console.log("将要删除的公告标题:", Public_title);
      this.$http.get("http://localhost:8080/public/del/"+Public_title).then(response => {
            console.log(response.data);
            if (response.data === 1) { // 确保这与后端返回的成功响应匹配
              console.log("删除成功!");
              ElMessage({
                message: '删除成功!',
                type: 'success',
              });
              // 刷新列表，例如重新调用filterRecent方法
              this.filterRecent();
            } else {
              console.log("删除失败!");
              ElMessage({
                message: '删除失败!',
                type: 'warning',
              });
            }
          })
          .catch(error => {
            console.error('删除请求发生错误:', error);
            ElMessage({
              message: '删除请求发生错误，请稍后重试或联系管理员!',
              type: 'error',
            });
          });
    },
search(title){
  console.log(title);
  this.$http.get("http://localhost:8080/public/query",
  {params:{
    Public_title:title,
  }}).then(response => {
    console.log(response.data);
    this.announcements = response.data;
    this.searchTitle = '';
    })
      .catch(error => {
        console.log(error);
        });

}
    },
  mounted() {
    this.LoadStuPageData();  //分页
    console.log(this.announcements);
    this.filterRecent();
  }
}
</script>

<style scoped>

/* 全局字体颜色设置 */
body, h1, h2, h3, h4, h5, h6, p, span, input, button, td, th, .management-header, .search-area, .announcement-list {
  color:	#808080 !important;
}

/* 其他样式保持不变 */

.management-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.search-area {
  display: flex;
  align-items: center;
}

.search-area input {
  margin-right: 5px;
}

.announcement-list table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.announcement-list th, .announcement-list td {
  text-align: left;
  padding: 8px;
  border: 1px solid #ddd;
}

.announcement-list th {
  background-color: #f0f0f0;
}

/* 确保按钮和输入框内的字体颜色也被设置 */
input, button {
  color: 	#4169E1 !important; /* 输入框和按钮内的字体颜色 */
}

/* 确保对话框内的字体颜色也被设置 */
.el-dialog__title, .el-form-item__label, .el-date-picker__input {
  color: #A9A9A9 !important; /* 对话框标题、表单项标签和日期选择器输入框的字体颜色 */
}

/* 如果有其他元素也需要改变字体颜色，请继续添加相应的选择器和样式规则 */

</style>